<template>
  <!-- 我的积分 -->
	<div class="">
		<naviHeader></naviHeader>
    
    <div class="banner">
      您当前排名为第{{ranking}}名
    </div>

    <div class="ranking-contianer">
      <div class="title">
        排行榜 <span>前10名</span>
      </div>

      <div class="contianer">
        <div class="item" v-for="(item, index) in list" :key="item.index">
          <div class="index">{{index + 1}}</div>
          <div class="name">{{item.alias}}</div>
          <div class="score">{{item.score}}积分</div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import { getRankList, getscore } from "../../service/getData";

export default {
  data() {
    return {
      integral: '',
      ranking: 12,
      list: [
        {
          alias: '',
          score: 0
        },
      ]
    };
  },

  mounted() {
    // console.log(title, descriptions);
    this.init();
  },
  components: {
    naviHeader
  },
  methods: {
    init: function () {
      // 获取排行榜
      getRankList(this.$store.userToken).then(res => {
        this.list = res.content
      })

      // 获取自己的积分排名
      getscore(this.$store.userToken).then(res => {
        this.ranking = res
      })
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.banner{
  @include sc(0.4rem, #fff);
  height: 2rem;
  line-height: 2rem;
  width: 100%;
  text-align: center;
  background: #16e08f;
}

.ranking-contianer{
  background: #fff;
  margin-top: 0.2rem;

  .title{
    height: 1rem;
    line-height: 1rem;
    border-bottom: 2px solid #f1f1f1;
    padding-left: 0.3rem;
  }

  .contianer{

    .item{
      @include fj(sapce-around);
      height: 1rem;
      align-items: center;
      border-bottom: 2px solid #f1f1f1;

      .index{
        width: 0.6rem;
        padding-left: 0.3rem;
      }

      .name{
        width: 4.5rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .score{
        width: 2.4rem;
        text-align: right;
        padding-right: 0.2rem;
      }
    }
  }
}
</style>
